import { ref, Ref, onMounted, onUnmounted } from "vue";
export default (targetRef: Ref<null | HTMLElement>) => {
  const showSatus = ref(false);
  const handler = (event: MouseEvent) => {
    if (
      targetRef.value &&
      targetRef.value.contains(event.target as HTMLElement)
    ) {
      showSatus.value = false;
    } else {
      showSatus.value = true;
    }
  };
  onMounted(() => {
    document.addEventListener("click", handler);
  });
  onUnmounted(() => {
    document.removeEventListener("click", handler);
  });
  return showSatus;
};
